<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
        <script src="static/libs/vue/vue.min.js" type="text/javascript" ></script>
    </head>
    <body>
        <div id="hook-arguments-example" >
        <p>13151</p>
        <button  v-perms="1223">sads</button>
        </div>
    <script>
    Vue.directive('perms', {
    	  bind: function () {
    		  console.log("bind");
    		  let value=this.expression;
    		  if("123"==value){
    			  this.el.remove();  
    		  }
    		  console.log( this.el);//: 指令绑定的元素。
    		  //
    		  console.log( this.vm);//: 拥有该指令的上下文 ViewModel。
    		 console.log( "expression: "+this.expression);//: 指令的表达式，不包括参数和过滤器。
    		  console.log("arg:"+ this.arg);//: 指令的参数。
    		  console.log( this.name);//: 指令的名字，不包含前缀。
    		  console.log( this.modifiers);//: 一个对象，包含指令的修饰符。
    		  console.log( this.descriptor);//: 一个对象，包含指令的解析结果。
    	    // 准备工作
    	    // 例如，添加事件处理器或只需要运行一次的高耗任务
    	  },
    	  update: function (newValue, oldValue) {
    	    // 值更新时的工作
    	    // 也会以初始值为参数调用一次
    		  console.log("update");
    	  },
    	  unbind: function () {
    		  console.log("unbind");
    	    // 清理工作
    	    // 例如，删除 bind() 添加的事件监听器
    	  }
    	})
        new Vue({
            el: '#hook-arguments-example',
            data: {
                message: 'hello!'
            }
        })
        </script>
    </body>
</html>